<template>
  <div class="panel">
    <div class="panel-header d-flex ai-center jc-between px-4">
      <div class="fs-lg">
        {{title}}
      </div>
      <div class="more fs-md">
        更多
      </div>
    </div>
    <div class="panel-content p-3">
        <slot></slot>
    </div>
  </div>
</template>

<script>

export default {

  props:{
      title:String,
  }
}
</script>

<style lang="scss" scoped>
@import '../../assets/scss/var';
.panel {
  box-shadow: 0 0 .3125rem rgba(0, 0, 0, 0.1);
  border-radius: .375rem;
  background-color: #fff;
  .panel-header {
    position: relative;
    height: 2.5rem;
    color: map_get($colors, 'darkgrey');
    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 0.625rem;
      height: 100%;
      background-color: map_get($colors, 'active');
    }

    .more{
        color: map_get($colors, 'darkgrey');
        cursor: pointer;
    }
  }
  
}
</style>